<template>
  <div class="index">
    <header class="h-screen w-full"></header>
    <layouts-main>
      <div>
        <Card v-for="article in articles" :key="article.id" class="mb-6">
          <div class="flex md:h-[180px] h-[160px] group overflow-hidden">
            <div
              class="w-[45%] flex-shrink-0 overflow-hidden bg-blue-300 absolute left-0 top-0 bottom-0"
            >
              <img
                src="~/assets/images/article_default.png"
                alt="article_default"
                class="w-full h-full block group-hover:scale-[1.1] duration-500"
              />
            </div>
            <div
              class="ml-[45%] flex-grow-[1] flex-shrink-0 overflow-hidden w-0"
            >
              <div class="px-4 py-2">
                <nuxt-link
                  :to="localePath(`/article/${article.id}`)"
                  class="text-[21px] text-[rgb(31, 45, 61)] cursor-pointer mb-3 hover:text-blue-500 duration-300 w-full whitespace-nowrap overflow-hidden text-ellipsis"
                >
                  {{ article.title }}
                </nuxt-link>
                <div class="text-xs text-gray-400 mb-3">
                  <i>i</i>
                  <span>{{ $t('publishedOn') }} {{ article.create_time }}</span>
                </div>
                <div class="text-xs">
                  <p>{{ article.desc }}</p>
                </div>
              </div>
            </div>
          </div>
        </Card>
        <div class="flex justify-center">
          <a-pagination
            v-model:current="page"
            :total="total"
            :page-size="pageSize"
            @change="onPageChange"
          />
        </div>
      </div>
      <template #right>
        <user-card></user-card>
        <div class="sticky top-16 mb-6">
          <Card
            class="sticky mt-4"
            icon="wenzhang1"
            :title="$t('latestArticles')"
          >
            <div
              v-for="article in lastNewArticles"
              :key="article.id"
              class="flex mb-4"
            >
              <div class="w-[50px] h-[50px]">
                <img
                  src="~/assets/images/article_default.png"
                  alt="article_default"
                  class="w-full h-full block object-cover"
                />
              </div>
              <div class="flex-1 w-0 ml-3">
                <nuxt-link
                  :to="localePath(`/article/${article.id}`)"
                  class="w-full text-xs text-gray-700 hover:text-blue-500 duration-300 cursor-pointer whitespace-nowrap overflow-hidden text-ellipsis"
                >
                  {{ article.title }}
                </nuxt-link>
                <div
                  class="text-xs text-gray-400 mt-1 w-full cursor-pointer whitespace-nowrap overflow-hidden text-ellipsis"
                >
                  {{ article.create_time }}
                </div>
              </div>
            </div>
          </Card>

          <Card class="sticky mb-4 mt-6" icon="biaoqian" :title="$t('tags')">
            <div class="flex flex-wrap gap-x-3 gap-y-2">
              <!-- :class="{ 'text-blue-400 !text-lg': item === 2 }" -->
              <nuxt-link
                v-for="tag in tags"
                :key="tag.id"
                :to="localePath(`/tags/${tag.id}`)"
                class="text-base text-gray-400"
              >
                <div>{{ tag.name }}</div>
              </nuxt-link>
            </div>
          </Card>

          <!-- 归档 -->
          <Card class="sticky mb-4 mt-6" icon="wenjian2" :title="$t('file')">
            <div class="">
              <div
                v-for="articleFile in articleFiles"
                :key="articleFile.id"
                class="text-base text-gray-400"
              >
                <div
                  class="flex justify-between py-1 hover:bg-gray-100 duration-300 px-2"
                >
                  <span>{{ articleFile.date }}</span>
                  <span>{{ articleFile.count }}</span>
                </div>
              </div>
            </div>
          </Card>
        </div>
      </template>
    </layouts-main>
    <!-- <main
      class="mx-auto py-8 px-4 xl:w-[1140px] lg:w-[960px] md:w-[720px] sm:w-[540px] w-full"
    >
      <div class="gap-6 flex flex-col sm:flex-row">
        <div class="flex-grow-[1] flex-shrink-0 order-2 sm:w-0">
          
        </div>
        <div class="flex-grow-[3] flex-shrink-0 order-1 sm:w-0">
          
        </div>
      </div>
    </main> -->
  </div>
</template>

<script>
import Vue from 'vue'
const LIMIT = 20
export default Vue.extend({
  name: 'IndexPage',
  async asyncData(context) {
    const page = 1
    const { data } = await context.$apis.client.articlePage({
      limit: LIMIT,
      page,
    })
    return {
      articles: data.list,
      page: Number(data.page),
      total: data.total,
      lastNewArticles: data.lastNewArticles,
      tagNum: data.tagNum,
      articleFiles: data.articleFiles,
      tags: data.tags,
    }
  },
  data() {
    return {
      page: 1,
      total: 0,
      pageSize: LIMIT,
      articles: [],
      lastNewArticles: [],
      tagNum: 0,
      articleFiles: [],
      tags: [],
    }
  },
  mounted() {},
  methods: {
    /**
     * 分页组件
     * - 分页组件，要显示第一个页最后一页
     * - 分页组件，当选中当前页时，前2页和后2页都要显示
     * - 分页组件，当  当前页前或后不足2项时，则总共要显示5项
     * @param total
     */
    createPagination(total = 1, page = 1) {
      const list = []
      // 做兼容
      page = page > total || page < 0 ? 1 : page
      if (total <= 5) {
        for (let page = 1; page <= total; page++) {
          list.push(page)
        }
        return list
      }
      // 分页组件，当选中当前页时，前2页和后2页都要显示
      if (page >= 3 && page <= total - 2) {
        const start = page - 2
        const end = page + 2
        for (let page = start; page <= end; page++) {
          list.push(page)
        }
        return list
      }
      // 分页组件，当  当前页前或后不足2项时，则总共要显示5项
      if (page < 3) {
        const start = 1
        const end = 5
        for (let page = start; page <= end; page++) {
          list.push(page)
        }
        return list
      } else if (page > total - 2) {
        const start = total - 5
        const end = total
        for (let page = start; page <= end; page++) {
          list.push(page)
        }
        return list
      }
    },
    async onPageChange(page) {
      const { data } = await this.$apis.client.articlePage({
        limit: LIMIT,
        page,
      })
      this.articles = data.list
      this.page = Number(data.page)
      this.total = data.total
      this.lastNewArticles = data.lastNewArticles
      this.tagNum = data.tagNum
      this.articleFiles = data.articleFiles
      this.tags = data.tags
    },
  },
})
</script>

<style lang="scss" scoped>
.index {
  header {
    background-image: url(~/assets/images/home.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
  }

  &::v-deep {
    .ant-pagination-item {
      background-color: #00c4b6;
      border: none;
      a {
        color: #fff;
      }
      &.ant-pagination-item-active {
        background-color: #ff7242;
      }
    }
    .ant-pagination-next,
    .ant-pagination-prev {
      &.ant-pagination-disabled {
        a {
          opacity: 0.5;
        }
      }
      a {
        background-color: #00c4b6;
        border: none;
        color: #fff;
      }
    }
  }
}
</style>
